<template>
  <div class="address-container">
    <h3>我的收货地址</h3>
    <div class="add-address-btn">
      <button class="btn btn-primary" @click="openAddressModal()">
        <i class="icon-plus"></i> 添加新地址
      </button>
    </div>
    <!-- 地址列表 -->
    <div class="address-list">
      <div class="address-card" v-for="(address,index) in addressList" :key="address.id"
           :class="{ 'default-address': 1===address.isDefault }">
        <div class="address-header">
          <div class="contact-info">
            <span class="contact-name">{{ address.recvName }}</span>
            <span class="contact-phone">{{ address.recvMobile }}</span>
            <span v-if="1===address.isDefault" class="default-tag">默认</span>
          </div>
          <div class="address-actions">
            <button class="btn btn-text" @click="setDefault(address.id)" v-if="2===address.isDefault">设为默认
            </button>
            <button class="btn btn-text" @click="openAddressModal(address)">编辑</button>
            <button class="btn btn-text btn-danger" @click="deleteAddress(address.id,index)">删除</button>
          </div>
        </div>
        <div class="address-body">
          {{ getFullAddress(index) }}
        </div>
      </div>
    </div>
    <!-- 地址编辑/添加模态框 -->
    <Modal :is-visible="modalConfig.visible" @close-modal="closeAddressModal">
      <Address :editing-address="modalConfig.editingAddress" @save-address="saveAddress"
               @close-modal="closeAddressModal"></Address>
    </Modal>
  </div>
</template>

<script setup>
import Address from '@/views/member/Address.vue'
import Modal from "@views/common/Modal.vue";
import {reactive, ref, onMounted, computed} from 'vue'
import apis from '@/config/api-config.js'
import getResponse from "@assets/js/http-client.js";
import {validateMobile} from "@assets/js/form-data-validate.js";
import {ElMessage, ElMessageBox} from "element-plus";

// 地址列表数据
const addressList = ref([]);
const addressRef = ref(null)
// 保存地址
const saveAddress = () => {
  modalConfig.visible = false;
  modalConfig.editingAddress = null;
  loadAddress();
}
const getFullAddress = (index) => {
  let address = addressList.value[index]
  return address.province + address.city + address.district + address.street + address.detail
};
// 删除地址
const deleteAddress = (id, index) => {
  ElMessageBox.confirm(`确定删除收件地址【${getFullAddress(index)}】码?`, '删除收件地址', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteById(id);
  }).catch(() => {
  });
}
const deleteById = async (id) => {
  let url = `${apis.address.delete.url}/${id}`;
  let type = apis.address.delete.type;
  let result = await getResponse(url, type);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return;
  }
  let success = result.data;
  if (success) {
    ElMessage.success('删除成功');
    await loadAddress();
  } else {
    ElMessage.error('删除失败,收件地址不存在');
  }
}

// 设置默认地址
const setDefault = async (id) => {
  let url = apis.address.modify.url;
  let type = apis.address.modify.type;
  let isDefault = 1;
  let params = {id, isDefault}
  let result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.warning(result.message);
    return;
  }
  addressList.value.forEach(item => {
    item.isDefault = item.id === id ? 1 : 2
  });
}

const modalConfig = reactive({
  visible: false,
  editingAddress: null
});
//关闭添加|修改收件地址模态框
const closeAddressModal = () => {
  modalConfig.visible = false;
  modalConfig.editingAddress = null;
}
//打开添加|修改收件地址模态框
const openAddressModal = (address = null) => {
  modalConfig.visible = true;
  if (address) {
    modalConfig.editingAddress = {...address};
  }
}
onMounted(() => {
  loadAddress();
});
/**
 * 加载收获地址
 */
const loadAddress = async () => {
  let url = apis.address.list.url;
  let type = apis.address.list.type;
  let result = await getResponse(url, type);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return
  }
  let list = result.data;
  if (list == null || undefined === list || 0 === list.length) {
    console.info('未设置任何收件地址');
    list = [];
  }
  addressList.value = list;
}
</script>

<style scoped>
h1 {
  text-align: left;
  color: #333;
  margin-bottom: 2rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.address-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


.add-address-btn {
  margin-bottom: 20px;
  text-align: right;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.btn-primary {
  background: #1890ff;
  color: #fff;
}

.btn-primary:hover {
  background: #40a9ff;
}


.btn-text {
  background: none;
  border: none;
  color: #1890ff;
  padding: 4px 8px;
}

.btn-text:hover {
  background: #e6f7ff;
}

.btn-danger {
  color: #ff4d4f;
}

.btn-danger:hover {
  background: #fff1f0;
}

.icon-plus {
  margin-right: 4px;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.address-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.address-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.address-card.default-address {
  border: 1px solid #1890ff;
  background: #e6f7ff;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.contact-phone {
  color: #666;
}

.default-tag {
  background: #1890ff;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.address-actions {
  display: flex;
  gap: 10px;
}

.address-body {
  color: #666;
  line-height: 1.5;
}


.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.region-selector select {
  flex: 1;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  cursor: pointer;
}

</style>